<template>
  <div class="relative w-full h-full page">
    <SearchCom
      :searchList="searchConfig"
      @search="handleSearch"
      @reset="handleReset"
    />
    <el-button type="primary" @click="editDiaVisible = true">
      <el-icon><Plus /></el-icon>
      新增分类
    </el-button>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      :default-expand-all="false"
      height="calc(100vh - 200px)"
      class="cover-table mt12"
    >
      <el-table-column prop="name" label="分类名称" />
      <el-table-column prop="address" label="操作" width="300px">
        <template #default="scope">
          <div class="flex_aic_jcc">
            <div class="operationBtn">
              <el-button type="text" @click="handleEdit(scope.row)"
                >编辑</el-button
              >
            </div>
            <!-- <div class="operationBtn">
              <el-button
                type="text"
                v-if="scope.row.level === 1"
                @click="handleAdd(scope.row)"
                >新增子分类</el-button
              >
            </div> -->
            <el-popconfirm
              title="确定删除吗？"
              @confirm="handleDelete(scope.row)"
              confirm-button-text="确定"
              cancel-button-text="取消"
            >
              <template #reference>
                <el-button class="ml0" type="text" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <EditDia v-model="editDiaVisible" :data="editDiaData"></EditDia>
  </div>
</template>

<script setup>
import { ref } from "vue";
import EditDia from "./editDia.vue";
import { Plus } from "@element-plus/icons-vue";

const filters = ref({
  searchKey: "",
});
const searchConfig = ref([
  {
    label: "分类名称",
    key: "name",
    type: "input",
  },
]);
const editDiaVisible = ref(false);
const editDiaData = ref({});
const currentPage = ref(1);
const pageSize = ref(10);
const tableData = ref(
  Array.from({ length: 10 }, (k, i) => ({
    name: `分类名称${i + 1}`,
    id: i + 1,
    level: 1,
    // children: Array.from({ length: 2 }, (k, j) => ({
    //   name: `子分类名称${j + 1}`,
    //   id: `${i + 1}-${j + 1}`,
    //   level: 2,
    // })),
  }))
);
const handleDelete = (row) => {
  console.log(row);
};
const handleEdit = (row) => {
  editDiaVisible.value = true;
  editDiaData.value = JSON.parse(JSON.stringify(row));
};
const handleSizeChange = (size) => {
  pageSize.value = size;
};
const handleCurrentChange = (page) => {
  currentPage.value = page;
};
const handleAdd = (row) => {
  editDiaVisible.value = true;
  editDiaData.value = {
    parentId: row.id,
  };
};
</script>

<style lang="scss" scoped>
.addBtn {
  height: 28px;
  margin-left: 10px;
  padding: 0 7px;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}
.split {
  width: 1px;
  height: 12px;
  background: #ddd;
  margin: 0 5px;
}

.page {
  .cover-table {
    :deep(.el-table__cell) {
      text-align: left;
    }
  }
}
</style>
